<template>
  <div class="nav">
    <ul>
        <!-- （发表的帖子） -->
        <li @click="isSelect('blog')" :class="{active : liActiveClass == 'blog'}">动态</li>
        <li @click="isSelect('comment')" :class="{active : liActiveClass == 'comment'}">评论</li>
        <li @click="isSelect('chat')" :class="{active : liActiveClass == 'chat'}">聊天</li>
        <li @click="isSelect('shoucang')" :class="{active : liActiveClass == 'shoucang'}">收藏</li>
        <li @click="isSelect('event')" :class="{active : liActiveClass == 'event'}">活动</li>
        <li @click="isSelect('gear')" :class="{active : liActiveClass == 'gear'}">渔具页面</li>
    </ul>
  </div>
</template>

<script>

export default {
  data(){
    return{
        liActiveClass:'blog' // 默认选中第一个li
    }
  },
  methods:{
    isSelect(index){
      this.liActiveClass = index; // 改变选中状态
      // 修改路径
      this.$router.push({path:'/other/'+index})
      
    }
  }
}
</script>

<style scoped>
.nav{
    width: 100%;
    margin-bottom: 20px;
}

ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    height: 50px;
    line-height: 50px;
    align-items: center;
    justify-content: space-around;
    background-color: #f5f5f5;
}
li{
    cursor: pointer;
    font-size: 18px;
    padding: 0 10px;
}
 .active{
    color: #0094ff;
    border-bottom: 2px solid #0094ff; 
 }
</style>
